<ui:composition template="../templates/3-layoutTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="content-middle">

                                          
        <script type="text/javascript"
                src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        </script>                                            
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
            tex2jax: {
            inlineMath: [["$","$"],["\\(","\\)"]]
            }
            });
        </script>                                            
        <script>
              //
              //  Use a closure to hide the local variables from the
              //  global namespace
              //
              (function () {


                //
                //  The onchange event handler that typesets the
                //  math entered by the user
                //
                    window.UpdateMath = function () {
                //  set the MathOutput HTML
                //  alert(document.getElementById("options").innerHTML);

                    //reprocess the MathOutput Element
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub, "options"]);

                }
            })();
        </script>
        
        <div align="center" >
            <script>
                var seconds = 0;
                function secondPassed() {
                    console.log("Running!" + countdownTimer);

                    var minutes = Math.round((seconds - 30) / 60);
                    var remainingSeconds = (seconds % 60);
                    if (remainingSeconds &lt; 10) {
                        remainingSeconds = "0" + remainingSeconds;
                    }
                    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
                    //First Alert
                    if (seconds === 600) {
                        //alert(seconds);
                        firstAlert();
                    }
                    //Second Alert
                    if (seconds === 300) {
                        //alert(seconds);
                        secondAlert();
                    }
                            
                    if (seconds === 0) {
                        clearInterval(countdownTimer);
                        document.getElementById('countdown').innerHTML = "end";
                        freeze();
                    } else {
                        seconds--;
                    }
                }
                var countdownTimer = setInterval('secondPassed()', 1000);// It shouldh have been 1000, as twice the timer is called
            </script>
            <h:form id="questionBoardForm">
                 
                <p:remoteCommand name="freeze" actionListener="#{questionBoardBean.freezeActivities}" />
                <p:remoteCommand name="firstAlert" actionListener="#{questionBoardBean.firstAlert}" />
                <p:remoteCommand name="secondAlert" actionListener="#{questionBoardBean.secondAlert}" />

                
                <p:remoteCommand name="onPageLoad" action="#{questionBoardBean.refreshPage}"
                                 autoRun="true" update=":progressPanel,:questionPanel,:statisticsPanel,:countdownPanel" oncomplete="UpdateMath()"
                                 >
                </p:remoteCommand>
                
                <p:dialog id="freezeDilog" header="Failure Notice" 
                          widgetVar="freezeDlg" modal="true" width="400" height="200" appendToBody="true"
                          closeOnEscape="true" resizable="false" closable="false">  

                    
                    <p>Freezing question and answer session... You are being redirected to home page.</p>  


                    <div align="center">
                        <p:commandButton value="Close" style="width:230px;height: 30px;" process="@this" 
                                         ajax="true" action="#{questionBoardBean.toDashBoard}"
                                         oncomplete="PF('endOfExamDialog').hide();"></p:commandButton>
                    </div>

                </p:dialog> 
                
                <p:remoteCommand name="updateDialog4" update="dialog4" />
                <p:dialog id="endOfExamDialog" header="Your Exam Is Completed" 
                          widgetVar="endOfExamDlg" modal="true" width="400" height="200" appendToBody="true"
                          closeOnEscape="true" resizable="false" closable="false">  
                    <p:panel id="dialog4" >
                        <p>Congratulations!!!.. You have secured #{questionBoardBean.totalPercentageInGeneralExam}% in this exam.</p>
                          
                        <p>Your certifications are being processed, and you will receive an email about your exam detail</p>  

                        <div align="center">
                            <p:commandButton value="Close" style="width:230px;height: 30px;" process="@this" 
                                             ajax="true" action="#{questionBoardBean.toDashBoard}"
                                             oncomplete="PF('endOfExamDialog').hide();"></p:commandButton>
                        </div>
                    </p:panel>
                </p:dialog>                

                <p:remoteCommand name="updateDialog1" update="dialog1" />
                <p:dialog id="cannotTakeSpecificSessionDilog" header="Failure Notice" 
                          widgetVar="cannotTakeSpecificSessionDlg" modal="true" width="400" height="200" appendToBody="true"
                          closeOnEscape="true" resizable="false" closable="false" onShow="updateDialog1()">  
                    <p:panel id="dialog1" >
                    
                    <p>Oops.. we are sorry, you scored only #{questionBoardBean.totalPercentageInGeneralExam}% hence you did not 
                        qualify for specific exam.  You may have to prepare more and take up general test,
                    secure more than 70% to get into next level</p>  

                    <p>Please prepare well and do well next..</p>  

                    <div align="center">
                        <p:commandButton value="Close" style="width:230px;height: 30px;" process="@this" 
                                         ajax="true" action="#{questionBoardBean.toDashBoard}"
                                         oncomplete="PF('endOfExamDialog').hide();"></p:commandButton>
                    </div>

                    </p:panel>
                </p:dialog> 
                
                <p:remoteCommand name="updateDialog2" update="dialog2" />
                <p:dialog id="examNotPassedDilog" header="Failure Notice" 
                          widgetVar="examNotPassedDlg" modal="true" width="500" height="200" appendToBody="true"
                          closeOnEscape="true" resizable="false" closable="false" onShow="updateDialog2()">  

                    <p:panel id="dialog2" >
                    <p>We are sorry to say that, you scored only #{questionBoardBean.totalPercentageInSpecificExam}% in Specific Exam
                        and in aggregate you scored #{questionBoardBean.totalAveragePercentage}% hence you did not clear RT Level 2 exam.
                         You may have to prepare more and take up general and specific exams, and in aggregate secure more than 80%</p>  

                    <p>All the best and do well..</p>  

                    <div align="center">
                        <p:commandButton value="Close" style="width:230px;height: 30px;" process="@this" 
                                         ajax="true" action="#{questionBoardBean.toDashBoard}"
                                         oncomplete="PF('endOfExamDialog').hide();"></p:commandButton>
                    </div>
                    </p:panel>
                </p:dialog>  
                
                <p:remoteCommand name="updateDialog3" update="dialog3" />
                <p:dialog id="specificSessionDialog" header="Specific Session is going to start" 
                          widgetVar="specificSessionDlg" modal="true" width="500" height="250" appendToBody="true"
                          closeOnEscape="true" resizable="false" closable="false" onShow="updateDialog3()">  
                    <p:panel id="dialog3" >
                    <p>Hi, You are about to start answering questions in specific session.  Once you accept this window, your time starts.</p>  
                    <p>You are recommended to keep referring to time left. Once the time is lapsed you will not be allowed to answer further or modify answers</p>  
                    <p>Please note, you need to secure more than 70% in Specific exam and in aggregate should secure more than 80% to clear RT Tests</p> 
                    <p>All the best and do well..</p>  

                    <div align="center">
                        <p:commandButton value="Start" style="width:230px;height: 30px;" process="@this" ajax="true" action="#{questionBoardBean.launchSpecificExam}"></p:commandButton>
                    </div>
                    </p:panel>

                </p:dialog>                
            </h:form>    
            <div  style="width:1070px; height: 600px; border: 0px solid #036fab;">
                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  escape="false" />
                <div style="float:left;width:800px; min-height: 300px; border: 0px solid red;padding: 5px;">
                    <div>
                        <h:form id="topMenuButtonsForm"  prependId = "false" >
                            <div style="float: left;margin-bottom: 5px;">
                                <p:commandButton process ="@form" disabled="#{questionBoardBean.formulaButtonDisabled}" ajax="true" value="Refer Formula" style="width:130px;height: 30px;" actionListener="#{questionBoardBean.showFormula}">
                                    <p:ajax event="dialogReturn"  />
                                </p:commandButton>

                                <p:commandButton process ="@form" disabled="#{questionBoardBean.referRTTableButtonDisabled}" ajax="true" value="Refer RT Tables" style="width:130px;height: 30px;" actionListener="#{questionBoardBean.showRTTables}">
                                    <p:ajax event="dialogReturn" />
                                </p:commandButton>

                                <p:commandButton process ="@form" disabled="#{questionBoardBean.referOpenBookButtonDisabled}" ajax="true" value="Open Book Reference" style="width:180px;height: 30px;" actionListener="#{questionBoardBean.showReference}">
                                    <p:ajax event="dialogReturn" />
                                </p:commandButton>
                            </div>
                            <div style="float: right;">
                                <p:commandButton process="@form" ajax="true" value="Review Questions" style="height: 30px;" actionListener="#{questionBoardBean.reviewQuestions}">
                                    <p:ajax event="dialogReturn" listener="#{questionBoardBean.onReviewQuestionDialogClose}" update=":questionPanel,:statisticsPanel"/>
                                </p:commandButton>
                                <p:commandButton process ="@form" ajax="true" value="Submit Your Answers Now" style="height: 30px;" action="#{questionBoardBean.submitAnswers}">
                                    <p:ajax event="dialogReturn" listener="#{questionBoardBean.onUnAnsweredQuestionDialogClose}" update=":questionPanel,:statisticsPanel"/>
                                </p:commandButton>
                            </div>
                        </h:form>
                    </div>
                    <div style="clear: both;margin: 5px;"></div>
                    <div style="border: 0px solid #AFAFAF; text-align: left;margin-top: 5px;" >
                        
                        <p:panel header="Question #{questionBoardBean.currentQuestion.rownum}" id="questionPanel" style="height: 350px;"> 
                            <h:form id="formQuestionTab">
                                <div style="border: 0px solid #AFAFAF; min-height: 300px;width: 100%" >
                                    
                                    <div style="clear: both;margin: 5px;"></div>
                                    <div style="min-height: 320px; float: left;padding-top: 5px;border: 0px solid #AFAFAF;width: 100%"  id="options">
                                        <div style="float:right;font-size:1.6em;color: #ffffff; border: 1px solid #AFAFAF; height:20px;padding:5px;background: #AFAFAF;">
                                            <p:selectBooleanCheckbox value="#{questionBoardBean.currentQuestion.markedForReview}" > 
                                                <p:ajax listener="#{questionBoardBean.markQuestionForReview}" update=":statisticsPanel" />
                                            </p:selectBooleanCheckbox>
                                            <p:spacer width="5" /> Mark this question for review
                                        </div>
                                        <div style="clear: both;margin: 5px;"></div>

                                        <div style="padding-bottom: 10px;padding-top: 10px;border-bottom: 1px solid #DC8700;" >
                                            #{questionBoardBean.currentQuestion.question}
                                        </div>
                                        <div style="float:left;padding: 10px 0px 10px 0px;min-height: 130px;border: 0px solid;" >
                                            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" > 
                                                <p:selectOneRadio value="#{questionBoardBean.currentQuestion.userSelectedAnswer}" layout="grid" columns="2"> 
                                                    a) <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option1}" itemValue="a" />
                                                    b) <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option2}" itemValue="b" />
                                                    c) <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option3}" itemValue="c" />
                                                    d) <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option4}" itemValue="d" />
                                                    e) <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option5}" itemValue="e" />
                                                    <p:ajax event="change" listener="#{questionBoardBean.markAnswer}" update=":statisticsPanel"/>
                                                </p:selectOneRadio>
                                            </h:panelGrid>
                                        </div>
                                    </div >                                 
                                </div>
                            </h:form>
                        </p:panel>
                    </div>
                    
                    <div style="clear: both;margin: 5px;padding-top: 5px;"></div>
                    <div style="float: left;">
                        <p:commandButton process ="@this" ajax="true" value="Previous" style="width:130px;height: 50px;" id="previousBtn"
                                         actionListener="#{questionBoardBean.getPreviousQuestion}"
                                         update=":questionPanel,:statisticsPanel,previousBtn,nextBtn" oncomplete="UpdateMath()" disabled="#{questionBoardBean.previousButtonDisabled}">
                        </p:commandButton>
                    </div>
                    <div style="float: right;">
                        <p:commandButton process ="@this" ajax="true" value="Next" style="width:130px;height: 50px;" id="nextBtn"
                                         actionListener="#{questionBoardBean.getNextQuestion}"
                                         update=":questionPanel,:statisticsPanel,nextBtn,previousBtn" oncomplete="UpdateMath()" disabled="#{questionBoardBean.nextButtonDisabled}">
                        </p:commandButton>
                    </div>
                    <div style="clear: both;margin: 5px;"></div>
                    <div style="border: 0px solid #AFAFAF;margin-top: 5px;">
                        <p:fieldset legend="Quick Instructions">  
                            
                            <table width="100%">
                                <tr><td><h:outputText value="This expression \(\sqrt{3x-1}+(1+x)^2\) is an example of an inline equation." /> </td></tr>
                                <tr><td><h:outputText value="To refer to any formula associated with question, click on Refer Formula" /> </td></tr>
                                <tr><td><h:outputText value="For refereing to open book, click on Show Reference" /></td></tr>
                                <tr><td><h:outputText value="At anypoint in time, if you want to review the question marked for review, click review questions" /></td></tr>
                            </table>
                        </p:fieldset>
                    </div>
                </div>

                <div style="float:right;width:250px; height: 500px; border: 0px solid #036fab; text-align: left; padding: 5px;">

                    <p:panel id="progressPanel" header="Statistics" style="height: 110px;">  
                        <div style="border: 1px solid #AFAFAF; height:50px;margin-bottom: 5px;font-size:1.3em;padding: 10px;">
                            #{questionBoardBean.examType} Session
                            <p>Exam Id: #{questionBoardBean.examId}</p>
                        </div>
                    </p:panel>   
                    <p:panel id="countdownPanel" style="margin:5px 0px 5px 0px;">
                        <div style="border: 1px solid #DC8700; height:150px;margin:5px 0px 5px 0px;padding: 20px;font-size:1.3em;">
                            Time Left <h:outputText style="color: #D20005; font-weight: bold;" value="( in Min : Sec )" />
                            <script>
                                seconds = "#{questionBoardBean.examTimeLimit}"
                            </script>    
                            <p>
                                <span id="countdown" styleClass="timer" style="font-size:4.3em;color: #DC8700" />
                            </p>
                            
                        </div>
                    </p:panel>      
                    <p:panel id="statisticsPanel" style="height: 200px;"> 
                        <div style="border: 1px solid #AFAFAF; height:100px;padding: 10px;">
                            <table width="100%">
                                <tr><td>Total Questions</td><td align="right"><h:outputText id="outTotalQuestions" value="#{questionBoardBean.totalQuestionsCount}" /></td></tr>
                                <tr><td>Answered</td><td align="right"><h:outputText id="outAttemptedAnswerCount" value="#{questionBoardBean.attemptedAnswerCount}" /></td></tr>
                                <tr><td>
                                        <p:commandLink actionListener="#{questionBoardBean.submitAnswers(actionEvent)}">
                                            <h:outputText style="color: #036fab; font-weight: bold;" value="Unanswered" />
                                        </p:commandLink>
                                    </td>
                                    <td align="right">
                                        <p:commandLink actionListener="#{questionBoardBean.submitAnswers(actionEvent)}">
                                            <h:outputText style="color: #036fab; font-weight: bold;" id="outUnAnsweredQuestionsCount" value="#{questionBoardBean.unAnsweredQuestionsCount}" />
                                        </p:commandLink>
                                    </td>
                                </tr>
                                <tr><td>
                                        <p:commandLink actionListener="#{questionBoardBean.reviewQuestions(actionEvent)}">
                                            <h:outputText style="color: #036fab; font-weight: bold;" value="Marked for Review" />
                                        </p:commandLink>
                                    </td>
                                    <td align="right">
                                        <p:commandLink actionListener="#{questionBoardBean.reviewQuestions(actionEvent)}">
                                            <h:outputText style="color: #036fab; font-weight: bold;" id="outQuestionsMarkedForReview" value="#{questionBoardBean.questionsMarkedForReview}" />
                                        </p:commandLink>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </p:panel> 


                </div> 

            </div>       
        </div>

    </ui:define>

</ui:composition>